<!DOCTYPE html>
<html>
    <title>Tribe Management</title>

    <script src='source.js'></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" /> 

    <body>
        <div id='main'>
            <p id='year'>Year: 100</p>
            <h2>RESOURCES</h2>
            <div class='resourceTable'>
                <div class='column'>
                    <p><b>Food</b></p>
                    <p id='food'>10</p>
                    <button onclick='moreFood()' onmouseover='showInfo(true, "food")' onmouseout="showInfo(false)">More Food</button>
                    <p id='fTimer'><i>0</i></p>
                </div>
                <div class='column'>
                    <p><b>Water</b></p>
                    <p id='water'>10</p>
                    <button onclick='moreWater()' onmouseover='showInfo(true, "water")' onmouseout="showInfo(false)">More Water</button>
                    <p id='waTimer'><i>0</i></p>
                </div>
                <div class='column'>
                    <p><b>Wood</b></p>
                    <p id='wood'>15</p>
                    <button onclick='moreWood()' onmouseover='showInfo(true, "wood")' onmouseout="showInfo(false)">More Wood</button>
                    <p id='woTimer'><i>0</i></p>
                </div>
                <div class='column' id='hiddenStone'>
                    <p><b>Stone</b></p>
                    <p id='stone'>0</p>
                    <button onclick='moreStone()' onmouseover='showInfo(true, "stone")' onmouseout="showInfo(false)">More Stone</button>
                    <p id='sTimer'><i>0</i></p>
                </div>
            </div>
            <br>
            <!--<button onclick='endTurn()' onmouseover='showInfo(true, "endyr")' onmouseout="showInfo(false)">End Year</button>-->
            <p id='warnings'></p>
            <div id='war'>
                <p>Hide me until armory bought</p>
                <button onclick='raid()' onmouseover='showInfo(true, "raid")' onmouseout="showInfo(false)">Go raiding</button>
                <button onclick='conquer()' onmouseover='showInfo(true, "war")' onmouseout="showInfo(false)">Go to war</button>
            </div>
            <div id='trade'>
                <p>Hide me until trade post bought</p>
            </div>
        </div>

        <div id='second'>
            <p id='pop'>Population: 8/8</p>
            <p id='unusedPop'>Available Workers: 0/8</p>

            <h2>BUILD</h2>

            <p><b>Home  </b></p>
            <p id='homes'>2<p>
            <p id='homeMat'>Required: 50 Wood</p>
            <button onclick='buildHouse()' onmouseover='showInfo(true, "home")' onmouseout="showInfo(false)">Build a home</button>
            
            <div class='workerAreas'>
                <div id='side1' class='column'>
                    <h2>RESOURCES</h2>
                    <div id='farmBuilds'>
                        <p><b>Farm</b></p>
                        <p id='farm'>0</p>
                        <p id='farmMat'>Required: 40 Wood</p>
                        <button onclick='buildFarm()' onmouseover='showInfo(true, "farm")' onmouseout="showInfo(false)">Build Farm</button>
                        <br>
                        <button onclick='addWorker(true, "farmer")'>Λ</button>
                        <button onclick='addWorker(false, "farmer")'>V</button>
                        <p id='farmerCount'><i>Farmers: 8/8</i></p>
                        <div id='loggingCamps'>
                            <p><b>Logging Camp</b></p>
                            <p id='logs'>0</p>
                            <p id='logMat'>Required: 40 Wood</p>
                            <button onclick='buildLogger()' onmouseover='showInfo(true, "log")' onmouseout="showInfo(false)">Build logging camp</button>
                            <br>
                            <button onclick='addWorker(true, "logger")'>Λ</button>
                            <button onclick='addWorker(false, "logger")'>V</button>
                            <p id='loggerCount'><i>Loggers: 0/0</i></p>
                        </div>
    
                        <div id='quarryBuilds' >
                            <p><b>Quarry</b></p>
                            <p id='quarry'>0</p>
                            <p id='quarryCost'>Required: 45 Wood</p>
                            <button onclick="buildQuarry()" onmouseover='showInfo(true, "quarry")' onmouseout="showInfo(false)">Build quarry</button>
                            <br>
                            <button onclick='addWorker(true, "miner")'>Λ</button>
                            <button onclick="addWorker(false, 'miner')">V</button>
                            <p id='minerCount'><i>Miners: 0/0</i></p>
                        </div>
                    </div>

                    
                </div>
                
                <div id='side2' class='column'>
                    <h2>MILITARY</h2>
                    <div id='wallBuilds'>
                        <p><b>Wall</b></p>
                        <p id='wall'>None</p>
                        <p id='wallMat'>Required: 45 Wood</p>
                        <button onclick='buildWall()' onmouseover='showInfo(true, "wall")' onmouseout="showInfo(false)">Build Wall</button>
                        <br>
                        <button onclick='addWorker(true, "guard")'>Λ</button>
                        <button onclick='addWorker(false, "guard")'>V</button>
                        <p id='guardCount'><i>Guards: 0/0</i></p>
                    </div>
                    
                    <div id='ArmoryBuild'>
                        <p><b>Armory</b></p>
                        <p id='armory'>0</p>
                        <p id='armCost'>Required: 40 Stone</p>
                        <button onclick="buildArmory()" onmouseover='showInfo(true, "armory")' onmouseout="showInfo(false)">Build Armory</button>
                        <br>
                        <button onclick='addWorker(true, "soldier")'>Λ</button>
                        <button onclick='addWorker(false, "soldier")'>V</button>
                        <p id='soldierCount'><i>Soldiers: 0/0</i></p>
                    </div>
                </div>

                <div id='side3' class='column'>
                    <h2>MISC.</h2>
                    <div id='tradeBuilds'>
                        <p><b>Trading Post</b></p>
                        <p id='tradePost'>0</p>
                        <p id='tradeMat'>Required: 50 Wood</p>
                        <button onclick='buildTrade()' onmouseover='showInfo(true, "trade")' onmouseout="showInfo(false)">Build Trade Post</button>
                    </div>

                    <div id='wellBuild'>
                        <p><b>Well</b></p>
                        <p id='well'>0</p>
                        <p id='wellCost'>Required: 20 Stone</p>
                        <button onclick='buildWell()' onmouseover='showInfo(true, "well")' onmouseout="showInfo(false)">Build Well</button>
                    </div>
                </div>
            </div>
        </div>

        <!--<div id='saveLoad'>
            <--<p><i>note: saving uses cookies. by saving the game,<br>you accept the cookies taken by the game.</i></p>--
            <button onclick="saveGame()">Save game</button>
            <button onclick='loadGame()'>Load game</button>
        </div>-->

        <div id='info'>
            <p id='itemInformation'>hi</p>
        </div>

        <div class='speedButtons'>
            <button onclick='speedChange(0)' id='pause'><img src='Icons/icons8-pause-24.png'></button>
            <button onclick='speedChange(1)' id='speed1'><img src='Icons/icons8-play-24.png'></button>
            <button onclick='speedChange(2)' id='speed2'><img src='Icons/icons8-fast-forward-24.png'></button>
            <button onclick="speedChange(3)" id='speed3'><img src='Icons/icons8-end-24.png'></button>
        </div>

        <!--<div id='pause'>
            
        </div>-->

        <div id='menu'>
            <img src='icons8-menu-24.png' onclick='showMenu()'>
            <div id='fullMenu'>
                <div id='saveLoad'>
                    <!--<p><i>note: saving uses cookies. by saving the game,<br>you accept the cookies taken by the game.</i></p>-->
                    <button onclick="saveGame()">Save game</button>
                    <button onclick='loadGame()'>Load game</button>
                </div>
            </div>
        </div>
    </body>
    <!--<a target="_blank" href="https://icons8.com/icons/set/menu">Menu icon</a> icon by <a target="_blank" href="https://icons8.com">Icons8</a>-->
</html>